<template>
    <div class="root">
      <!-- 标题 -->
      <div class="title">
        <h3>中外运-日新国际货运有限公司 </h3>
      </div>
      <div class="nav">
        <Nav v-for="(nav,index) in navs" :nav="nav" :index="index" :key="nav" @navChange="navChange" :navActiveNumber="navActiveNumber" />
      </div>
      <div class="main">
        <News v-for="item in news" :key="item.id" :news="item"/>
      </div>
      <Footer :isPerson="isPerson"></Footer>
    </div>
</template>

<script>
import Nav from "../../components/Nav";
import News from "../../components/News";
import Footer from "../../components/Footer";
export default {
  name: 'Article',
  components: {Nav,News,Footer},
  data(){
    return{
      navs:["新闻资讯","娱乐头条","阅读平台","游戏资讯","游戏资讯1"],//导航栏列表
      navActiveNumber:0,//默认激活的nav
      news:[{
        id:0,
        title:"新闻标题",//新闻标题
        content:"新闻内容",//新闻内容
        date:"新闻日期",//新闻日期
        img:"新闻图片",//新闻图片
      },{
        id:2,
        title:"新闻标题",//新闻标题
        content:"新闻内容",//新闻内容
        date:"新闻日期",//新闻日期
        img:"新闻图片",//新闻图片
      },{
        id:3,
        title:"新闻标题",//新闻标题
        content:"新闻内容",//新闻内容
        date:"新闻日期",//新闻日期
        img:"新闻图片",//新闻图片
      },{
        id:4,
        title:"新闻标题",//新闻标题
        content:"新闻内容",//新闻内容
        date:"新闻日期",//新闻日期
        img:"新闻图片",//新闻图片
      },{
        id:5,
        title:"新闻标题",//新闻标题
        content:"新闻内容",//新闻内容
        date:"新闻日期",//新闻日期
        img:"新闻图片",//新闻图片
      },{
        id:6,
        title:"新闻标题",//新闻标题
        content:"新闻内容",//新闻内容
        date:"新闻日期",//新闻日期
        img:"新闻图片",//新闻图片
      },{
        id:7,
        title:"新闻标题",//新闻标题
        content:"新闻内容",//新闻内容
        date:"新闻日期",//新闻日期
        img:"新闻图片",//新闻图片
      },],//一组新闻
      isPerson:false,//表明是否是个人页,影响到底部按钮的颜色
    }
  },
  methods:{
    navChange(number){//navItem单击事件
      this.navActiveNumber=number;
      //console.log("父组件中接收到了子组件的传值:"+number)
    },
  },
}
</script>

<style lang="less">
.root{
  //background-color: green;
  //height: 100%;
  position: relative;
  .title{
    height: 44px;
    line-height: 44px;
    text-align:center;
    //background-color: lavender;
    font-size: 15px;
  }
  .nav{
    // width: 100%;
    height: 36px;
    //background-color: lavenderblush;
    // overflow-y: hidden;
     overflow-x: auto;
    white-space: nowrap;
   // border-bottom: 4px solid lavender;
    padding: 0;
  }
  .main{
    width: 100%;
    height:80% ;//531适应手机浏览器；570适应公众号 1-(587-538+71)/587 587是屏幕像素总高度
    //background-color: lavenderblush;
    margin: 0;
    padding:0 10px;
    overflow-y: auto;
    //overflow-x:hidden;
  }
}
</style>
